<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>JavaScript基础知识点--DOM操作之节点 | Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="DOM之节点 添加节点  删除节点  修改节点  查找节点   添加节点create 系列方法 document.creatElement()：创建新的元素节点。一个参数，标签名  document.createTextNode()：创建新的文本节点。一个参数，要插入的节点的文本  document.createDocumentFragment()：创建文档片段  document.create">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript基础知识点--DOM操作之节点">
<meta property="og:url" content="http://yoursite.com/2019/08/26/JavaScript基础知识点-DOM操作之节点/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="DOM之节点 添加节点  删除节点  修改节点  查找节点   添加节点create 系列方法 document.creatElement()：创建新的元素节点。一个参数，标签名  document.createTextNode()：创建新的文本节点。一个参数，要插入的节点的文本  document.createDocumentFragment()：创建文档片段  document.create">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2019-08-31T02:06:54.754Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript基础知识点--DOM操作之节点">
<meta name="twitter:description" content="DOM之节点 添加节点  删除节点  修改节点  查找节点   添加节点create 系列方法 document.creatElement()：创建新的元素节点。一个参数，标签名  document.createTextNode()：创建新的文本节点。一个参数，要插入的节点的文本  document.createDocumentFragment()：创建文档片段  document.create">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-JavaScript基础知识点-DOM操作之节点" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/26/JavaScript基础知识点-DOM操作之节点/" class="article-date">
  <time datetime="2019-08-26T12:55:06.000Z" itemprop="datePublished">2019-08-26</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      JavaScript基础知识点--DOM操作之节点
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="DOM之节点"><a href="#DOM之节点" class="headerlink" title="DOM之节点"></a>DOM之节点</h1><ul>
<li><p>添加节点</p>
</li>
<li><p>删除节点</p>
</li>
<li><p>修改节点</p>
</li>
<li><p>查找节点</p>
</li>
</ul>
<h1 id="添加节点"><a href="#添加节点" class="headerlink" title="添加节点"></a>添加节点</h1><h2 id="create-系列方法"><a href="#create-系列方法" class="headerlink" title="create 系列方法"></a>create 系列方法</h2><ul>
<li><p>document.creatElement()：创建新的元素节点。一个参数，标签名</p>
</li>
<li><p>document.createTextNode()：创建新的文本节点。一个参数，要插入的节点的文本</p>
</li>
<li><p>document.createDocumentFragment()：创建文档片段</p>
</li>
<li><p>document.createComment()：传入一个注释文本，创建一个注释节点</p>
</li>
<li><p>node1.appendChild(node2);将node2（节点二）装填到node1（节点1）内。</p>
</li>
</ul>
<p>document.createElement 还能支持创建当前浏览器不支持的标签名，在IE6-8下，这是一个著名的 hack</p>
<h3 id="创建节点示例一"><a href="#创建节点示例一" class="headerlink" title="创建节点示例一"></a>创建节点示例一</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var newDiv = document.createElement(&quot;div&quot;); // 创建元素节点，这句话就是在窗口创建div元素</span><br><span class="line">var newContent = document.createTextNode(&quot;Hi there and greetings!&quot;); // 创建文本节点及其内容</span><br><span class="line">newDiv.appendChild(newContent); // 将文本节点装填到元素节点内</span><br></pre></td></tr></table></figure>

<h3 id="创建节点示例二"><a href="#创建节点示例二" class="headerlink" title="创建节点示例二"></a>创建节点示例二</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">var comment = document.createComment(&quot;A comment&quot;);</span><br><span class="line">    var fragment = document.createDocumentFragment();</span><br><span class="line">    var ul = document.getElementById(&quot;myList&quot;);// HTML 文档中ul的id为myList</span><br><span class="line">    var li = null;</span><br><span class="line">    for(var i = 0; i &lt; 3; i++)&#123;</span><br><span class="line">        li = document.createElement(&quot;li&quot;);</span><br><span class="line">        li.appendChild(document.createTextNode(&quot;Item &quot;+ (i+1)));</span><br><span class="line">        fragment.appendChild(li);</span><br><span class="line">    &#125;</span><br><span class="line">    ul.appendChild(fragment);</span><br><span class="line">    // insertBefore 有两个参数，一个是要插入的节点，另一个是插入节点相对的对象，插入节点要插入到哪个对象的前面的对象，这里的第二个参数是ul</span><br><span class="line">    document.body.insertBefore(comment, document.body.firstChild);</span><br></pre></td></tr></table></figure>

<h1 id="IE-浏览器条件编译"><a href="#IE-浏览器条件编译" class="headerlink" title="IE 浏览器条件编译"></a>IE 浏览器条件编译</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// 如果是IE浏览器，则!!0为假，不return。如果不是IE浏览器，则!0为真，返回并且不执行条件编译后面的代码</span><br><span class="line">if(!</span><br><span class="line">/*@cc_on!@/</span><br><span class="line">0) return;</span><br></pre></td></tr></table></figure>

<h1 id="高效创建节点的方法"><a href="#高效创建节点的方法" class="headerlink" title="高效创建节点的方法"></a>高效创建节点的方法</h1><ul>
<li><p>innerHTML：用来设置或获取当前标签的起始和结束里面的内容</p>
</li>
<li><p>outerHTML：返回调用它的元素及所有子节点的 HTML 标签，包含元素自身的标签</p>
</li>
<li><p>innerText：设置或获取位于对象起始和结束标签内的文本，低版本火狐浏览器不支持，可用 textContent 方法</p>
</li>
</ul>
<h2 id="使用-innerHTML-的限制"><a href="#使用-innerHTML-的限制" class="headerlink" title="使用 innerHTML 的限制"></a>使用 innerHTML 的限制</h2><ul>
<li><p>字符串的最左边不能出现空白，IE6~8会自动移除它</p>
</li>
<li><p>大多数浏览器不会对 script 标签进行脚本执行操作</p>
<ol>
<li><p>为 script 标签添加 defer 属性</p>
</li>
<li><p>script 标签要在有作用域的元素之后</p>
</li>
</ol>
</li>
<li><p>不能单独创建 meta，style，link等元素，一定要在前面加上一些字符</p>
</li>
</ul>
<h2 id="避开空白节点"><a href="#避开空白节点" class="headerlink" title="避开空白节点"></a>避开空白节点</h2><ol>
<li><p>nodeType</p>
</li>
<li><p>第二套 API</p>
</li>
</ol>
<h1 id="类数组对象"><a href="#类数组对象" class="headerlink" title="类数组对象"></a>类数组对象</h1><h2 id="NodeList-对象的特点"><a href="#NodeList-对象的特点" class="headerlink" title="NodeList 对象的特点"></a>NodeList 对象的特点</h2><p>NodeList 是 childNodes 的保存的对象</p>
<ul>
<li><p>NodeList 是一种类数组对象，用于保存一组有序的节点</p>
</li>
<li><p>可以通过方括号语法来访问 NodeList 的值，有 item 方法与 length 属性</p>
</li>
<li><p>它并不是 Array 的实例，没有数组对象的方法</p>
</li>
</ul>
<h2 id="类数组对象-HTMLCollection"><a href="#类数组对象-HTMLCollection" class="headerlink" title="类数组对象 HTMLCollection"></a>类数组对象 HTMLCollection</h2><ul>
<li><p>Ele.getElementsByTagName()：会根据节点的名称返回一组元素的集合</p>
</li>
<li><p>document.scripts：会返回页面里的全部 script 的集合</p>
</li>
<li><p>document.links：会返回页面里的全部 a 元素</p>
</li>
<li><p>document.images：会返回页面里的全部 image 元素</p>
</li>
<li><p>document.forms：会返回页面里全部的页面表单</p>
</li>
<li><p>tr.cells：会返回 tr 的所有 td 子元素的集合</p>
</li>
<li><p>select.options：会返回这个 select 属性的全部选项</p>
</li>
</ul>
<h2 id="namedItem"><a href="#namedItem" class="headerlink" title="namedItem()"></a>namedItem()</h2><p>该方法返回 HTMLCollection 对象中指定 ID 或 name 的元素</p>
<h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>HTMLCollection.namedItem(name)</p>
</blockquote>
<h3 id="参数说明"><a href="#参数说明" class="headerlink" title="参数说明"></a>参数说明</h3><p>name：必需。你要返回元素的 id 或 name 属性的值</p>
<h2 id="类数组对象-NamedNodeMap"><a href="#类数组对象-NamedNodeMap" class="headerlink" title="类数组对象 NamedNodeMap"></a>类数组对象 NamedNodeMap</h2><p>主要用于获取属性的属性值</p>
<ul>
<li><p>Ele.attributes：返回指定节点的属性集合</p>
</li>
<li><p>Ele.attributes.getNamedItem(“attributeName”).nodeValue：返回指定的属性节点。attributeName为要查找的属性值的属性名，该方法只能获取在元素上定义的属性值</p>
</li>
</ul>
<h2 id="类数组对象的动态性"><a href="#类数组对象的动态性" class="headerlink" title="类数组对象的动态性"></a>类数组对象的动态性</h2><ul>
<li><p>NodeList，HTMLCollection，NamedNodeMap 三个集合都是动态的，是有生命的、有呼吸的对象</p>
</li>
<li><p>它们实际上是基于 DOM 结构动态执行查询的结果，因此 DOM 结构的变化能够自动反映这些对象</p>
</li>
<li><p>每当文档结构发生变化时，它们都会得到更新。因此，它们始终都会保存着最新、最准确的信息</p>
</li>
</ul>
<h1 id="节点查找方法"><a href="#节点查找方法" class="headerlink" title="节点查找方法"></a>节点查找方法</h1><ul>
<li><p>getElementById()</p>
</li>
<li><p>getElementsByName()</p>
</li>
<li><p>getElementsTagName()</p>
</li>
<li><p>getElementsByClassName()</p>
</li>
<li><p>querySelector()：返回文档中匹配指定 CSS 选择器的一个元素，括号中写符合 CSS 语法的字符</p>
</li>
<li><p>querySeletorAll()：返回文档中匹配指定 CSS 选择器的一组元素，括号中写符合 CSS 语法的字符</p>
</li>
</ul>
<p>前三个只能是 document 对象的方法</p>
<p>querySelectorAll() 和 querySelector() 方法返回的是一个静态的 NodeList ,所谓静态 NodeList 就是对底层 document 的更改不会影响到返回的这个 NodeList 对象.此时返回的 NodeList 只是 querySelectorAll() 方法被调用时的文档状态的快照。</p>
<h1 id="操作节点"><a href="#操作节点" class="headerlink" title="操作节点"></a>操作节点</h1><ul>
<li><p>appendChild()：为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点</p>
</li>
<li><p>insertBefore()：在指定的已有子节点之前插入新的子节点。该方法返回新创建的节点</p>
</li>
<li><p>replaceChild()：新节点替换某个子节点。返回被替换的节点</p>
</li>
<li><p>cloneNode()：创建节点的拷贝，并返回该副本。拷贝的节点要有父节点，如果没有父节点，要通过上面三个方法对其进行添加</p>
</li>
<li><p>normalize()：合并相邻的文本节点</p>
</li>
<li><p>splitText()：按照指定的位置把文本节点分割为两个节点。返回分割后新的文本节点</p>
</li>
</ul>
<h2 id="参数说明-1"><a href="#参数说明-1" class="headerlink" title="参数说明"></a>参数说明</h2><table>
<thead>
<tr>
<th>方法</th>
<th>参数</th>
</tr>
</thead>
<tbody><tr>
<td>appendChild()</td>
<td>appendChild(要插入的节点)</td>
</tr>
<tr>
<td>insertBefore()</td>
<td>insertBefore(要插入的节点，指定的子节点)</td>
</tr>
<tr>
<td>replaceChild()</td>
<td>replaceChild(要插入的节点，被替换的节点)</td>
</tr>
<tr>
<td>cloneNode()</td>
<td>cloneNode(boolean)，若Boolean为false，则只复制该节点。如果未true，则为深度拷贝，将该节点下的子节点一起拷贝</td>
</tr>
<tr>
<td>splitText()</td>
<td>splitText(num)，节点从num位置被分割，包括num该位置的字符</td>
</tr>
</tbody></table>
<h2 id="nodeValue-与-innerHTML-的区别"><a href="#nodeValue-与-innerHTML-的区别" class="headerlink" title="nodeValue 与 innerHTML 的区别"></a>nodeValue 与 innerHTML 的区别</h2><h3 id="nodeValue"><a href="#nodeValue" class="headerlink" title="nodeValue"></a>nodeValue</h3><p>nodeValue 属性设置或返回指定节点的节点值。（文本节点和属性节点可以用nodeValue）</p>
<h3 id="innerHTML"><a href="#innerHTML" class="headerlink" title="innerHTML"></a>innerHTML</h3><p>innerText属性可以获取或者设置指定元素的文本内容</p>
<h3 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h3><p>nodeValue 只会读取 element 这个节点的节点值，不包括子节点，而 innerHTML 包括子节点</p>
<h1 id="删除节点"><a href="#删除节点" class="headerlink" title="删除节点"></a>删除节点</h1><h2 id="涉及方法"><a href="#涉及方法" class="headerlink" title="涉及方法"></a>涉及方法</h2><ul>
<li><p>removeChild()：删除某个节点中指定的子节点。返回被删除的节点</p>
</li>
<li><p>removeNode()：IE的私有实现。将目标节点从文档中删除，返回目标节点</p>
</li>
<li><p>innerHTML</p>
</li>
<li><p>deleteContents</p>
</li>
<li><p>textContent</p>
</li>
</ul>
<h2 id="参数说明-2"><a href="#参数说明-2" class="headerlink" title="参数说明"></a>参数说明</h2><table>
<thead>
<tr>
<th>方法</th>
<th>参数说明</th>
</tr>
</thead>
<tbody><tr>
<td>removeChild()</td>
<td>一个参数。为要删除的子节点</td>
</tr>
<tr>
<td>removeNode()</td>
<td>一个参数为布尔值，默认值为false。若为false，仅删除目标节点，保留子节点。若为true，功能和removeChild类似</td>
</tr>
</tbody></table>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/26/JavaScript基础知识点-DOM操作之节点/" data-id="ck4r400qg005il0w0jdump3r9" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2019/08/31/JavaScript基础知识点-DOM属性/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          JavaScript基础知识点--DOM属性
        
      </div>
    </a>
  
  
    <a href="/2019/08/26/JavaScript基础知识点-BOM之navigator对象及方法/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">JavaScript基础知识点--BOM之navigator对象及方法</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Ajax/">Ajax</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS3/">CSS3</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Dart/">Dart</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Flutter/">Flutter</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML5/">HTML5</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JSON/">JSON</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/QT/">QT</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Sass/">Sass</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/bootstrap/">bootstrap</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ajax/">Ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Dart/">Dart</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Flutter/">Flutter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/">Git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSON/">JSON</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Java/">Java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/QT/">QT</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Sass/">Sass</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TypeScript/">TypeScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bootstrap/">bootstrap</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Ajax/" style="font-size: 12.22px;">Ajax</a> <a href="/tags/CSS/" style="font-size: 18.89px;">CSS</a> <a href="/tags/CSS3/" style="font-size: 17.78px;">CSS3</a> <a href="/tags/Dart/" style="font-size: 14.44px;">Dart</a> <a href="/tags/Flutter/" style="font-size: 16.67px;">Flutter</a> <a href="/tags/Git/" style="font-size: 12.22px;">Git</a> <a href="/tags/HTML/" style="font-size: 14.44px;">HTML</a> <a href="/tags/HTML5/" style="font-size: 12.22px;">HTML5</a> <a href="/tags/JSON/" style="font-size: 10px;">JSON</a> <a href="/tags/Java/" style="font-size: 11.11px;">Java</a> <a href="/tags/JavaScript/" style="font-size: 20px;">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 10px;">Javascript</a> <a href="/tags/QT/" style="font-size: 12.22px;">QT</a> <a href="/tags/React/" style="font-size: 15.56px;">React</a> <a href="/tags/Sass/" style="font-size: 11.11px;">Sass</a> <a href="/tags/TheKnowledgeOf/" style="font-size: 11.11px;">TheKnowledgeOf</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/bootstrap/" style="font-size: 11.11px;">bootstrap</a> <a href="/tags/jQuery/" style="font-size: 13.33px;">jQuery</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">December 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/12/29/Flutter-MaterialApp常用属性介绍/">Flutter-MaterialApp常用属性介绍</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-ListView/">Flutter-ListView</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-AppBar/">Flutter-AppBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-TabBar/">Flutter-TabBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-按钮/">Flutter-按钮</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>